<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5 drag</title>
    <style>
        [draggable] {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            /* Required to make elements draggable in old WebKit */
            -khtml-user-drag: element;
            -webkit-user-drag: element;
        }
        .column {
            height: 150px;
            width: 150px;
            float: left;
            border: 2px solid #666666;
            background-color: #ccc;
            margin-right: 5px;
            -webkit-border-radius: 10px;
            -ms-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 3px #000;
            -ms-box-shadow: inset 0 0 3px #000;
            box-shadow: inset 0 0 3px #000;
            text-align: center;
            cursor: move;
        }
        .column header {
            color: #fff;
            text-shadow: #000 0 1px;
            box-shadow: 5px;
            padding: 5px;
            background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            background: -webkit-gradient(linear, left top, right top,
            color-stop(0, rgb(0,0,0)),
            color-stop(0.50, rgb(79,79,79)),
            color-stop(1, rgb(21,21,21)));
            background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            border-bottom: 1px solid #ddd;
            -webkit-border-top-left-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -ms-border-radius-topleft: 10px;
            border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -ms-border-top-right-radius: 10px;
            -moz-border-radius-topright: 10px;
            border-top-right-radius: 10px;
        }
        .column.over {
            border: 2px dashed #000;
        }
    </style>
</head>
<body>
<div id="columns">
    <div class="column" draggable="true"><header>A</header></div>
    <div class="column" draggable="true"><header>B</header></div>
    <div class="column" draggable="true"><header>C</header></div>
</div>
<script>
    var dragSrcEl = null;

    function handleDragStart(e) {
        console.log(e.type, e);
        // Target (this) element is the source node.
        this.style.opacity = '0.4';

        dragSrcEl = this;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDrop(e) {
        console.log(e.type, e);
        // this/e.target is current target element.

        if (e.stopPropagation) {
            e.stopPropagation(); // Stops some browsers from redirecting.
        }

        // Don't do anything if dropping the same column we're dragging.
        if (dragSrcEl != this) {
            // Set the source column's HTML to the HTML of the columnwe dropped on.
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');
        }

        return false;
    }

    function handleDragOver(e) {
        console.log(e.type, e);
        if (e.preventDefault) {
            e.preventDefault(); // Necessary. Allows us to drop.
        }

        e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

        return false;
    }

    function handleDragEnter(e) {
        console.log(e.type, e);
        // this / e.target is the current hover target.
        this.draggable && this.classList.add('over');
    }

    function handleDragLeave(e) {
        console.log(e.type, e);
        // this / e.target is previous target element.
        this.draggable && this.classList.remove('over');
    }

    function handleDragEnd(e) {
        console.log(e.type, e);
        // this/e.target is the source node.
        this.style.opacity = '1';
        [].forEach.call(cols, function (col) {
            col.classList.remove('over');
        });
    }

    var cols = document.querySelectorAll('#columns .column');
    [].forEach.call(cols, function(col) {
        col.addEventListener('dragstart', handleDragStart, false);
        col.addEventListener('dragenter', handleDragEnter, false);
        col.addEventListener('dragover', handleDragOver, false);
        col.addEventListener('dragleave', handleDragLeave, false);
        col.addEventListener('drop', handleDrop, false);
        col.addEventListener('dragend', handleDragEnd, false);
    });
</script>
</body>
</html>